<!--常见问题-->
<template>
	<view>
		<view class="qambox mb20">
			<view class="f30 tc mb20">
				{{$t("fx.qa.tit1")}}
			</view>
			<view class="cy tc f30 mb30">
				{{$t("weburl")}}
			</view>
			<view class="ca2 f20">
				{{$t("fx.qa.txt1")}}
				{{$t("weburl")}}
				{{$t("fx.qa.txt2")}}
			</view>
		</view>
		<view class="qambox mb20">
			<view class="f30 tc mb30">
				{{$t("fx.qa.tit2")}}
			</view>
			<view class="ca2 f20 tc">
				{{$t("fx.qa.txt3")}}
			</view>
		</view>
		<view class="qambox mb20">
			<view class="f30 tc mb30" style="padding: 0 52rpx;">
				{{$t("fx.qa.tit3")}}
			</view>
			<view class="ca2 f20">
				<text>{{$t("fx.qa.txt4")}}</text>
				<text class="cy">{{$t("weburl")}}</text>
				<text>{{$t("fx.qa.txt5")}}</text>
			</view>
		</view>
		<view class="qambox mb20">
			<view class="f30 tc mb30">
				{{$t("fx.qa.tit4")}}
			</view>
			<view class="ca2 f20">
				{{$t("fx.qa.txt6")}}
			</view>
		</view>
		<view class="qambox mb20">
			<view class="f26 tc mb30">
				{{$t("fx.qa.tit5")}}
			</view>
			<view class="por mb30">
				<image src="/static/fx/fa.png" class="w100" mode="widthFix"></image>
				<view class="poa w100 f24 bj_around" style="left: 0;top: 192rpx;">
					<view class="">
						{{$t("fx.n1.txt5")}}
					</view>
					<view class="">
						{{$t("fx.n1.txt6")}}
					</view>
				</view>
			</view>
			<view class="ca2 f20 mb20">
				<text>{{$t("fx.qa.txt7")}}</text>
				<text class="cy">{{$t("fx.qa.txt8")}}</text>
			</view>
			<view class="ca2 f20">
				{{$t("fx.qa.txt9")}}
			</view>
		</view>

		<view class="qambox mb20">
			<view class="f30 tc mb30">
				{{$t("fx.qa.tit6")}}
			</view>
			<view class="bj_left mb40">
				<image src="/static/fx/q1.png" style="width: 110rpx;margin-right: 20rpx;" mode="widthFix"></image>
				<view class="ca2 f20">
					<view class="mb10">{{$t("fx.qa.txt10")}}</view>
					<view class="">
						<text class="cy">{{$t("fx.qa.txt11")}}</text>
						<text>{{$t("fx.qa.txt12")}}</text>
					</view>
				</view>
			</view>
			<view class="ca2 f20">
				<view class="bj_between mb30">
					<text>{{$t("fx.qa.txt13")}}</text>
					<text>2500</text>
				</view>
				<view class="bj_between mb30">
					<text>{{$t("fx.qa.txt14")}}</text>
					<text>1980</text>
				</view>
				<view class="bj_between mb30">
					<text>{{$t("fx.qa.txt15")}}</text>
					<text>2500</text>
				</view>
			</view>
			<view class="tc mb30">
				<image src="/static/fx/q2.png" class="qambox-q2" mode="widthFix"></image>
			</view>
			<!--5个等级介绍-->
			<view class="por f20 mb20 tc">
				<view class="mb40 bj_around">
					<view class="">
						<view class="">
							{{$t("fx.qa.w1")}}
						</view>
						<view class="cy">
							{{$t("fx.qa.w1.t")}}
						</view>
					</view>
					<view class="">
						<view class="">
							{{$t("fx.qa.w2")}}
						</view>
						<view class="cy">
							{{$t("fx.qa.w2.t")}}
						</view>
					</view>
				</view>
				<view class="bj_around">
					<view class="">
						<view class="">
							{{$t("fx.qa.w3")}}
						</view>
						<view class="cy">
							{{$t("fx.qa.w3.t")}}
						</view>
					</view>
					<view class="">
						<view class="">
							{{$t("fx.qa.w4")}}
						</view>
						<view class="cy">
							{{$t("fx.qa.w4.t")}}
						</view>
					</view>
				</view>
				<view class="poa lt0 w100 h100 bj_center">
					<view class="">
						<view class="ca2">
							{{$t("fx.qa.w5")}}
						</view>
						<view class="cy">
							{{$t("fx.qa.w5.t")}}
						</view>
					</view>
				</view>
			</view>

			<!--各个层级介绍-->
			<view class="qambox-qbox bj_between mb30">
				<view class="" v-for="item in jb1">
					<view class="qambox-qbox-qm">
						<image :src="item.img"></image>
						<view class="">
							{{item.txt}}
						</view>
					</view>
					<view class="qambox-qbox-qm2">
						<view>
							{{item.tit}}
						</view>
						<view>
							{{item.num}}
						</view>
					</view>
				</view>
			</view>
			<view class="tc">
				<image src="/static/fx/q9.png" class="qambox-q2" mode="widthFix"></image>
			</view>
			<view class="qambox-qbox bj_between mb30">
				<view class="" v-for="item in jb2">
					<view class="qambox-qbox-qm">
						<image :src="item.img"></image>
						<view class="">
							{{item.txt}}
						</view>
					</view>
					<view class="qambox-qbox-qm2">
						<view>
							{{item.tit}}
						</view>
						<view>
							{{item.num}}
						</view>
					</view>
				</view>
			</view>
			<!--举例-->
			<view class="f30 tc mb10">
				{{$t("fx.qa.tit7")}}
			</view>
			<view class="ca2 f20 mb30" v-html="yt1"></view>
			<view class="f30 tc mb10">
				{{$t("fx.qa.tit8")}}
			</view>
			<view class="ca2 f20 mb30" v-html="yt2"></view>
		</view>

		<view class="qambox">
			<view class="f30 tc mb30">
				{{$t("fx.qa.tit9")}}
			</view>
			<view class="ca2 f20" v-html="yt3"></view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import useI18n from '@/store/useI18n.js'
	const {
		t
	} = useI18n()
	
	let yt1 = t("fx.qa.yt1")
	let yt2 = t("fx.qa.yt2")
	let yt3 = t("fx.qa.yt3")

	let jb1 = ref([{
			img: "/static/fx/q3.png",
			txt: t("fx.qa.j1.txt"),
			tit: t("fx.qa.j1.tit"),
			num: t("fx.qa.j1.num")
		},
		{
			img: "/static/fx/q4.png",
			txt: t("fx.qa.j2.txt"),
			tit: t("fx.qa.j2.tit"),
			num: t("fx.qa.j2.num")
		},
		{
			img: "/static/fx/q5.png",
			txt: t("fx.qa.j3.txt"),
			tit: t("fx.qa.j3.tit"),
			num: t("fx.qa.j3.num")
		}
	])
	let jb2 = ref([{
			img: "/static/fx/q6.png",
			txt: t("fx.qa.j4.txt"),
			tit: t("fx.qa.j4.tit"),
			num: t("fx.qa.j4.num")
		},
		{
			img: "/static/fx/q7.png",
			txt: t("fx.qa.j5.txt"),
			tit: t("fx.qa.j5.tit"),
			num: t("fx.qa.j5.num")
		},
		{
			img: "/static/fx/q8.png",
			txt: t("fx.qa.j6.txt"),
			tit: t("fx.qa.j6.tit"),
			num: t("fx.qa.j6.num")
		}
	])
</script>

<style scoped lang="scss">
	.qambox {
		background: #00561D;
		border-radius: 20rpx;
		padding: 28rpx 22rpx;
		word-wrap: break-word;
		word-break: normal;

		&-q2 {
			width: 430rpx;
		}

		&-qbox {
			padding: 0 22rpx;

			&-qm {
				width: 188rpx;
				height: 270rpx;
				background: #003411;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				font-size: 20rpx;
				text-align: center;
				padding: 20rpx 18rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 20rpx;
				}
			}

			&-qm2 {
				width: 188rpx;
				height: 88rpx;
				background: #098B34;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding-top: 8rpx;
				text-align: center;

				view:nth-child(1) {
					font-size: 20rpx;
					margin-bottom: 10rpx;
				}

				view:nth-child(2) {
					font-size: 24rpx;
					color: #FFBE32;
				}
			}
		}
	}
</style>